<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div id="searchBox">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">操作人</label>
                        <div class="layui-input-inline">
                            <input type="text" id="searchname" name="name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
					<div class="layui-inline">
                        <label class="layui-form-label">IP</label>
                        <div class="layui-input-inline">
                            <input type="text" id="searchip" name="ip" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">起始时间</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            <!-- <input id="timeformatExample1" class="layui-input" type="text" class="time" /> -->
                            <input id="timeformatExample1" type="text" autocomplete="off" class="Wdate layui-input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                        </div>
                    </div>
					<div class="layui-inline">
                        <label class="layui-form-label">子系统</label>
                        <div class="layui-input-inline" style="width: 160px;">
                            <select name="system" lay-filter="system-select"  id="system_select"></select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        <button type="reset" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-reset-btn">重置</button>
                    </div>
                </div>
               
            </form>
        </div>
        <table class="layui-hide" id="currentTableId" lay-size="sm" lay-filter="currentTableFilter"></table>

    </div>
</div>
<script id="syscodeSelect" type="text/html">
    <!--layui模板引擎，动态添加后台数据-->
    {{# layui.each(d, function(index, item){ }}
    <option value='{{  item.sys_code  }}'>{{ item.name }}</option>
    {{# }); }}
  </script>
<style>
    #searchBox .layui-inline{margin:0 0px 10px 0}
    .layui-form-item{margin:0 !important}
    #colorExam{
        padding:0 10px 0
    }
    .spanItem{
        line-height: 20px;
        margin-right:20px;
        display: inline-block;
    }
    .spanItem span{
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top:2px;
    }
    .spanItem .redItem{     
        background:#4f7ecb
    }
    .spanItem .blueItem{     
        background:#e34d4d
    }
    .layui-form-pane .layui-input-inline{width:120px;}
</style>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script src="../js/base.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
<script>
    //curData存储当前操作行的数据 用于给iframe弹窗传值
    let curData = {};
    layui.use(['form', 'table','laydate','myModule',"laytpl"], function () {
        //初始化开始
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layuimini = layui.layuimini,
            myModule = layui.myModule,
            laytpl = layui.laytpl,
            laydate = layui.laydate;
        
        let tableBlue="#4f7ecb" //表格蓝色
        let tableRed="#e34d4d" //表格红色
        //设置表格高度
        let tableHeight = getBaseHeight()-$("#searchBox").outerHeight()-20
        //时间选择器
        // $('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
        //获取子系统下拉框信息
          //ajax
          myModule.ajax({
              url: "../api/syscode-select.json",             
              type:"GET",
              dataType: "json",
              success: function(res) {
                  var getTpl = $("#syscodeSelect").get(0).innerHTML;
                  var view = $("#system_select").get(0);
                  console.log("res.data",res.data)
                  var html = laytpl(getTpl).render(res.data, function(html) {
                      view.innerHTML = html;
                  });
                  form.render('select');
              },
              error: function() {
                // layer.close(loadInd);
              }
          });
        /***********************************表格渲染及表格操作按钮监听********************************************/
        //构建表格
        table.render({
            elem: '#currentTableId',
            //url: '../api/table.json',
            height: tableHeight, //设置表格高度
			contentType: 'application/json',
			where: {
                name:'', //操作人
                time:'',
				ip: '',
				source: '',
				error: '',
				line: '',
				col: '',
				id: '',
            }, //如果无需传递额外参数，可不加该参数
            // method: 'post', //如果无需自定义HTTP类型，可不加该参数
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            //limit:Number.MAX_VALUE, // 数据表格默认全部显示
            cols: [[
			    {type: "numbers",width: 40,title: '序号'},
                {field: 'name', width: 80, title: '操作人'},
                {field: 'time', width: 200, title: '时间'},
                {field: 'ip', width: 160, title: 'ip'},
                {field: 'syscode', width: 100, title: 'syscode'},
                {field: 'source', width: 500, title: '源码'},
				{field: 'line', width: 60, title: '行'},
				{field: 'col', width: 60, title: '列'},
				{field: 'error', width: 360, title: '错误信息'}
            ]],
            page: false,
            done: function(res, curr, count) {
                //关闭遮罩层
                layer.closeAll('loading')
                var len = res.data.length - 1;

            },
            error:function(res) {
                //关闭遮罩层
                layer.closeAll('loading')
                layer.msg('请求失败', {icon: 2,time: 1100});
            }
        });
        
        /*****************************************搜索栏接听*******************************************/
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = data.field;
			console.log("re",result)
            layer.load(0, {
                shade: [0.1, '#000']
            });
            //执行搜索重载
            table.reload('currentTableId', {
                url: `${ajaxUrlSet}/list_front_trace`,
                method: 'post', //如果无需自定义HTTP类型，可不加该参数
                where: {
                    name: result.name, //操作人
                    time: $('#timeformatExample1').val()?$('#timeformatExample1').val()+".000":"",
					ip: result.ip,
					source: '',
					error: '',
					line: '',
					col: '',
					id: '',
                    syscode:result.system
                }
            });

            return false;
        });
        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            console.log("reset")
            var result = data.field;
            $('#system_select').val("14") //重置syscode 默认为住院收费系统
            $("#timeformatExample1").val("")
            $("#searchname").val("")
            $("#searchip").val("")
            form.render();
            //执行搜索重载
            table.reload('currentTableId', {
                url: `${ajaxUrlSet}/list_front_trace`,
                method: 'post', //如果无需自定义HTTP类型，可不加该参数
                where: {
                    name: '', //操作人
                    time: '',
					ip: '',
					source: '',
					error: '',
					line: '',
					col: '',
					id: '',
                    syscode:'14'//重置syscode 默认为住院收费系统
                }
            });

            return false;
        });

    });
    //iframe弹窗获取当前操作行数据的方法
    function getCurData() {
        return curData;
    }
</script>

</body>
</html>